<template>
  <div class="rq">
    <div class="item" v-for='(item, index) in caipin' :key='index'>
      <div class="details">
        <img :src="item.imgurl">
        <div class="details-list">
          <span>{{item.cp_name}}</span>
          <div class="list-more">
            <span>介绍：{{item.mssage}}</span>
          </div>
          <div class="list-price">
            ￥{{item.price}}/份
          </div>
        </div>
      </div>
      <div class="num">
        <span></span>
        <div>
          <el-button class="jiaru" @click="addCar(index)" v-if="item.num == 0">加入购物车</el-button>
            <div v-else>
              <button class="anniu" @click="jianNum(item.cp_id, index)">-</button>
              <input type="text" :value="item.num" disabled>
              <button class="anniu" @click="addNum(item.cp_id, index)">+</button>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue'
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      caipin: [],
      cars: [],
      num: 0
    }
  },
  methods: {
    ...mapActions(['addGoods']),
    addCar: function(index) {
      var item = this.caipin[index]
      this.addGoods(item)
    },
    addNum(cpid, index) {
      var item = this.caipin[index]
      this.$set(item, 'num', item.num + 1)
      this.$store.commit('ADDNUM', cpid)
    },
    jianNum(cpid, index) {
      var item = this.caipin[index]
      this.$set(item, 'num', item.num - 1)
      this.$store.commit('JIANNUM', cpid)
    },
    async fetch () {
      const { data: res } = await this.$http.get('/cdzc?cp_lb=炒饭')
      if (res.meta.status !== 200) {
        return this.$message.error('获取菜单信息失败！')
      }
      this.caipin = res.caipinxx
      this.cars = JSON.parse(localStorage.getItem('car'))
      for (var i = 0; i < this.caipin.length; i++) {
        if (this.cars != null) {
          for (var j = 0; j < this.cars.length; j++) {
            if (this.caipin[i].cp_id === this.cars[j].cp_id) {
              this.$set(this.caipin[i], 'num', this.cars[j].num)
            }
          }
        }
      }
    }
  },

  created () {
  },
  mounted () {
    this.fetch()
  }
}
</script>

<style type="text/css" scoped>

body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.item {
  padding: 10px;
}
.rq>.item + .item{
  border-top: 1px solid #ccc;
}
.details {
  background: #f5f5f5;
  padding: 15px;
  display: flex;
  font-size: 15px;
}
.details img {
  width: 70px;
  height: 70px;
}
.details-list {
  margin-left: 15px;
  color: #888;
}
.list-more span {
  display:block;
  color: #ccc;
}
.list-price {
  font-size: 15px;
  color: red;
}
.num {
  color: #888;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
.num .jiaru {
  font-size: 5px;
  width: 100px;
  height: 33px;
  background:red;
  color:#fff;
  outline: none;
}

.anniu {
  width: 31px;
  height: 25px;
  background: #e0e0e0;
  color: #58595b;
  border: none;
  outline: none;
}
.num input {
  width: 37px;
  height: 25px;
  border: none;
  text-align: center;
  background: #fff;
}

</style>
